<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
	<script type="text/javascript" src="hammer.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;text-decoration: none}
		.box{width: 200px;height: 200px;background: #ccc;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script type="text/javascript">
		function $(...arg){
			return document.querySelectorAll(...arg);
		}
		window.onload=function(){
			let obox=$('.box')[0];
			let hammer=new Hammer(obox,{});
			hammer.get('pinch').set({ enable: true });
			hammer.on('pinchstart',ev=>{
				// obox.style.transform=`scale(0.5)`;
			})
			hammer.on('pinchmove',ev=>{
				// alert(JSON.stringify(ev))
				obox.innerHTML=ev.scale+'<br>'+ev.distance+'<br>'+ev.deltaX+'<br>'+ev.deltaY+'<br>';
				obox.style.transform=`scale(${ev.scale})`;
			});
			hammer.on('pinchend',ev=>{
				obox.style.transform=`scale(${ev.scale})`;

			});
		};
	</script>
</body>
</html>